<!--
 * @FilePath     : /study_code/layui/16-1.html
 * @Description  : 图片上传
 * @Date         : 2025-04-09 17:40:07
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-09 17:41:44
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <!-- p1 上传按钮 -->
    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
      <i class="layui-icon layui-icon-upload"></i>
      单图片上传
    </button>

    <!-- p2 预览列表 -->
    <div style="width: 132px">
      <div class="layui-upload-list">
        <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px" />
        <div id="ID-upload-demo-text"></div>
      </div>
      <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
        <div class="layui-progress-bar" lay-percent=""></div>
      </div>
    </div>

    <hr style="margin: 21px 0" />
    <div class="layui-upload">
      <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
        <i class="layui-icon layui-icon-upload"></i>
        多图片上传
      </button>
      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px">
        预览图：
        <div class="layui-upload-list" id="upload-demo-preview"></div>
      </blockquote>
    </div>

    <script src="/layui/dist/layui.js"></script>
    <script>
      layui.use(function () {
        var upload = layui.upload
        var layer = layui.layer
        var element = layui.element
        var $ = layui.$
        // 单图片上传
        var uploadInst = upload.render({
          elem: '#ID-upload-demo-btn',
          url: '/layui/upload/up1', // 实际使用时改成您自己的上传接口即可。
          before: function (obj) {
            // 预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
              $('#ID-upload-demo-img').attr('src', result) // 图片链接（base64）
            })

            element.progress('filter-demo', '0%') // 进度条复位
            layer.msg('上传中', { icon: 16, time: 0 })
          },
          done: function (res) {
            // 若上传失败
            if (res.code > 0) {
              return layer.msg('上传失败')
            }
            // 上传成功的一些操作
            // …
            $('#ID-upload-demo-text').html('') // 置空上传失败的状态
          },
          error: function () {
            // 演示失败状态，并实现重传
            var demoText = $('#ID-upload-demo-text')
            demoText.html(
              '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
            )
            demoText.find('.demo-reload').on('click', function () {
              uploadInst.upload()
            })
          },
          // 进度条
          progress: function (n, elem, e) {
            element.progress('filter-demo', n + '%') // 可配合 layui 进度条元素使用
            if (n == 100) {
              layer.msg('上传完毕', { icon: 1 })
            }
          },
        })
        // 多图片上传
        upload.render({
          elem: '#ID-upload-demo-btn-2',
          url: '/layui/upload/up1', // 实际使用时改成您自己的上传接口即可。
          multiple: true,
          before: function (obj) {
            // 预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
              $('#upload-demo-preview').append(
                '<img src="' +
                  result +
                  '" alt="' +
                  file.name +
                  '" style="width: 90px; height: 90px;">'
              )
            })
          },
          done: function (res) {
            // 上传完毕
            // …
            console.log(1, '上传成功', res)
          },
        })
      })
    </script>
  </body>
</html>
